<!-- 当前模块：我的 -->
<template>
  <div class="mine-index">
    <div class="mine-index-top">
      <div class="mine-index-userInfo">
        <div class="avatar">
          <img :src="headImgUrl" alt="">
          <div v-if="isLogin" class="upload-btn" @click="handleUpload">上传头像</div>
        </div>
        <span v-if="!isLogin" class="userName-text" @click="handleLogin">点击登录用户</span>
        <div class="mine-index-userInfo-content" v-else>
          <span class="appUserName">您好，{{ userInfo.appUserName }}</span>
          <!-- <span class="communityName">{{ userInfo.communityName }}</span> -->
          <span class="userName">{{ userInfo.link }}</span>
        </div>
      </div>
    </div>
    <div class="bottom12"></div>
    <van-cell title="联系我们" clickable is-link @click="handleClick(7, '/pages/contactUs/main')"></van-cell>
    <div class="bottom12"></div>
    <van-cell title="个人设置" clickable is-link @click="handleClick(8, '/pages/person/pages/personSetting/main')"></van-cell>
    <div class="footer_btn" v-if="isLogin">
      <van-button size="default" round block @click="handleLoginout">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import {api} from "../utils/api"
export default {
  data() {
    return {
      userName: '',
      headImgUrl: ''
    };
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin;
    },
    userInfo() {
      return this.$store.getters.userInfo || {};
    },
    communityId() {
      return this.$store.getters.communityId;
    }
  },
  onShow() {
    this.headImgUrl = this.userInfo.headImgUrl || require("../../static/images/index/person.png");
  },
  onPullDownRefresh() {
    wx.startPullDownRefresh({
      complete: () => {
        wx.stopPullDownRefresh();
      }
    })
  },
  onShareAppMessage() {
    return {
      title: '智慧养老',
      path: '/pages/auth/main',
      from: "menu" 
    }
  },
  methods: {
    handleClick(id, path) {
      wx.navigateTo({
        url: path
      });
    },
    handleUpload() {
      let _this = this;
      wx.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album','camera'], //从相册选择
        success: res => {
          const fs = wx.getFileSystemManager()
          fs.readFile({
            filePath: res.tempFilePaths[0],
            encoding: 'base64',
            position: 0,
            success:(result) => {
              _this.handleUploadFn(result.data);

            },
            fail(res) {
              console.error(res)
            }
          })
          
        }
      })
    },
    async handleUploadFn(base64) {
      const {memberId, appUserId} = this.userInfo;
      const data = {
        memberId: memberId,
        communityId: this.communityId,
        appUserId: appUserId,
        photo: base64
      }
      const res = await api.uploadOwnerPhoto(data);
      if(res.code == 0) {
        if(res.data) {
          this.headImgUrl = res.data.headImgUrl;
          const userInfo = this.userInfo;
          userInfo.headImgUrl = this.headImgUrl;
          this.$store.dispatch('setUserInfo', userInfo);
        }
      } else {
        wx.showToast({
          title: res.msg || "请求异常",
          icon: "error"
        })
      }
    },
    handleLogin() {
      this.RouterLinkFn();
    },
    async handleLoginout() {
      wx.showModal({
        title: "提示",
        content: "是否退出登录",
        confirmText: "立即退出",
        success: async (res) => {
          if(res.confirm) {
            let data = {
              token: wx.getStorageSync('token')
            }
            const result = await api.logout(data);
            wx.navigateTo({
              url: "/pages/login/main",
              success: res=>{
                this.$store.dispatch('clearStates');
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mine-index {
  width: 60vw;
  min-height: 100vh;
  background: #f5f5f5;
  .mine-index-top {
    height: 100px;
    background: linear-gradient(#5A94D6, #5F98D8, #7DACE3, #85B2E6, #A3C7F0);
    padding: 40rpx 48rpx 0;
    .mine-index-userInfo {
      height: 200rpx;
      display: flex;
      align-items: center;
      .avatar {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        padding: 1px solid #ccc;
        overflow: hidden;
        border: 1px solid #eee;
        .upload-btn {
          width: 100%;
          height: 48rpx;
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          font-size: 24rpx;
          background-color: rgba(0,0,0,0.6);
          color: #fff;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      
      .mine-index-userInfo-content {
        display: flex;
        flex-direction: column;
        color: #000;
        padding-left: 24rpx;
        font-size: 26rpx;
        .appUserName {
          font-weight: bold;
        }
        .userName {
          color: #3D3434;
          font-size: 26rpx;
        }
      }
      .userName-text {
        padding-left: 24rpx;
        font-size: 28rpx;
        color: #000;
        letter-spacing: 4rpx;
      }
    }
    .grid-container {
      display: flex;
      justify-content: space-between;
      background: #fff;
      border-radius: 16rpx;
      padding: 24rpx 0;
      .grid-container-item {
        width: 100%;
        margin-right: 24rpx;
        text-align: center;
        color: #000;
        &:nth-last-of-type(1) {
          margin-right: 0;
        }
        .grid-container-item-value {
          font-size: 36rpx;
        }
        .grid-container-item-label {
          font-size: 32rpx;
        }
      }
    }
    
  }
  .footer_btn {
    padding: 24rpx;
  }
}
</style>
